<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/footable/css/footable.bootstrap.css">
    <link rel="stylesheet" href="../assets/boostrap/bootstrap.css">
    <link rel="stylesheet" href="../assets/boostrap/bootstrap-theme.css">
    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
</head>
<body>
    <div id="app">
        <table id="footable"></table>
    </div>


    <script src="../assets/jquery.min.js"></script>
    <script src="../assets/footable/js/moment.js"></script>
    <script src="../assets/footable/js/footable.js"></script>
    <script src="../assets/vue/vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data(){
                return {
                    columns:[
                        {'name':'id','title':'编号'},
                        {'name':'state','title':'状态'},
                        {'name':'oper','title':'操作'}
                    ],
                    rows:[
                        
                    ]
                }
            },
            watch:{
                rows:function(c,o){
                    var me = this;
                    console.log('1')
                    $('a[data-widget=oper]').on('click',function(){
                        var _that = $(this);
                        var event = _that.attr('data-event');
                        switch(event){
                        case '':console
                        }
                        alert(_that.attr('data-event'))
                    });
                }
            },
            methods:{
                renderFootable(data){
                    var me = this;
                    FooTable.init("#footable", {
                        expandFirst: false,
                        columns: me.columns,
                        empty: "没有数据",
                        rows:data
                    });
                }
            },
            beforeMount(){
                var me = this;
                me.columns[2].formatter = function(value, options, rowData){
                    var oprGroup = [];
                    console.log(rowData)
                    var detailHtml = '<a href="#" data-widget="oper" data-event="detail" data-id='+rowData.id+'>详情</a>&nbsp;';
                    var editHtml = '<a href="#" data-widget="oper" data-event="edit" data-id='+rowData.id+'>编辑</a>&nbsp;';
                    var deletelHtml = '<a href="#" data-widget="oper" data-event="del" data-id='+rowData.id+'>删除</a>&nbsp;';
                    oprGroup.push(detailHtml);
                    oprGroup.push(editHtml);
                    oprGroup.push(deletelHtml);
                   // me.$createElement('a','详情')
                   console.log(me.$createElement('a','详情','','详情'))
                    return me.$createElement('a','详情');
                }
            },
            mounted(){
                var me = this;
                var rows = [{'id':1,'state':1},
                        {'id':2,'state':2},];
                me.rows = rows;
                me.renderFootable(me.rows);
            }
        });
    
    </script>


</body>
</html>